<template>
    <div>
        <!-- 文章列表展示区域 -->
        <div v-show="activeStatu">
            <el-card class="box">
                <div class="card-padding">
                    <!-- 列表头部标题和浏览量信息 -->
                    <div class="flex">
                        <div class="title-width">标题</div>
                        <div class="time_top">浏览量</div>
                    </div>
                    
                    <!-- 搜索和筛选区域 -->
                    <div class="flexBox">
                        <div> 
                            <!-- 标题搜索框 -->
                            <el-input v-model.trim="inputed" @input="filters" placeholder="输入标题" class="search-input">
                                <template #prefix>
                                    <el-icon class="el-input__icon">
                                        <search />
                                    </el-icon>
                                </template>
                            </el-input>
                        </div>
                        
                        <!-- 浏览量区间筛选 -->
                        <div class="native-input-container ml-5">
                            <input 
                                type="text" 
                                v-model.trim="minQuantity" 
                                @input="handleNumberInput(minQuantity, 'minQuantity')"
                                @blur="validateNumberInput(minQuantity, 'minQuantity')"
                                placeholder="最小浏览量" 
                                min="0"
                                class="quantity-input"
                            >
                            <span class="range-separator">-</span>
                            <input 
                                type="text" 
                                v-model.trim="maxQuantity" 
                                @input="handleNumberInput(maxQuantity, 'maxQuantity')"
                                @blur="validateNumberInput(maxQuantity, 'maxQuantity')"
                                placeholder="最大浏览量" 
                                min="0"
                                class="quantity-input"
                            >
                        </div>
                    </div>
                    
                    <!-- 操作按钮区域 -->
                    <div class="flex">
                        <div><el-button type="primary" @click="add" class="add_class">
                                新增</el-button>
                        </div>
                        <el-button type="danger" class="delelist ml-3" @click="deleList">批量删除</el-button>
                    </div>
                    
                    <!-- 文章列表表格 -->
                    <div> 
                        <el-table :data="activeList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                                class="mt-2 w-full" :cell-style="{ 'text-align': 'center' }" lazy="true"
                                v-el-table-infinite-scroll="handleTableScroll"
                                :header-cell-style="{ 'text-align': 'center' }" @selection-change="handleSelectionChange"
                                height="auto">
                            <el-table-column type="selection" fixed="left" />
                            <el-table-column prop="id" label="序号" fixed="left" />
                            <el-table-column prop="title" label="标题" show-overflow-tooltip width="150" />
                            
                            <!-- 类型列，根据状态值显示创业/就业 -->
                            <el-table-column prop="status" label="类型">
                                <template #default="scope">
                                    <span>{{ scope.row.status == 1 ? '创业' : '就业' }}</span>
                                </template>
                            </el-table-column>
                            
                            <!-- 图片列，支持预览功能 -->
                            <el-table-column prop="userImg" label="图片" width="200">
                                <template #default="scope">
                                    <div class="demo-image__preview">
                                        <el-image class="preview-image" :src="testName + scope.row.img"
                                            :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                                            :preview-src-list="[testName + scope.row.img]" :initial-index="4"
                                            fit="cover" preview-teleported />
                                    </div>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="intr" label="介绍" width="200" show-overflow-tooltip />
                            <el-table-column prop="quantity" sortable label="浏览量" />
                            
                            <!-- 操作列，包含编辑和删除功能 -->
                            <el-table-column label="操作" width="180" fixed="right">
                                <template #default="scope">
                                    <div class="handle">
                                        <div @click="edit(scope.row)" class="edit-btn">编辑</div>
                                        <div class="handle-spacing"></div>
                                        <div @click="deletes(scope.row)" class="delete-btn">删除</div>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    
                    <!-- 分页控件 -->
                    <div class="paging">
                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :page-sizes="[5, 10, 20, 50]" :small="small" :disabled="disabled" background
                            layout="total, sizes, prev, pager, next, jumper" :total="activeList.length" />
                    </div>
                    
                    <!-- 删除确认对话框 -->
                    <el-dialog title="删除" v-model="centerDialogVisible" width="30%" center>
                        <div class="dialog-message">确认删除该文章吗?</div>
                        <div class="dialog-footer">
                            <el-button @click="centerDialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="deleteid">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
                
                <!-- 批量删除相关对话框 -->
                <el-dialog v-model="shows" title="是否要删除" center width="20vw">
                    <el-button @click="shows = false">取 消</el-button>
                    <el-button type="primary" @click="oks">确 定</el-button>
                </el-dialog>
                
                <!-- 批量删除确认对话框 -->
                <el-dialog title="批量删除" v-model="centerDialogVisiblet" width="30%" center>
                    <div class="dialog-message">确认删除这批数据吗?</div>
                    <span slot="footer" class="dialog-footer">
                        <div></div>
                        <div>
                            <el-button @click="centerDialogVisiblet = false">取 消</el-button>
                            <el-button type="primary" @click="deleteid_t">确 定</el-button>
                        </div>
                    </span>
                </el-dialog>
            </el-card>
        </div>
        
        <!-- 新增/编辑文章表单区域 -->
        <div v-show="activeStatud" class="form-padding">
            <el-card class="form-card">
                <div class="form-title">{{ addText }}</div>
                <div class="divider"></div>
                
                <!-- 表单内容区域 -->
                <div class="form-content">
                    <el-form ref="ruleFormRef" class="w-full flex-col demo-ruleForm" :model="ruleForm"
    status-icon :rules="rules" label-position="left" label-width="auto">
                        
                        <!-- 表单左侧区域 -->
                        <div class="form-row">
                            <div class="form-col-left">
                                <el-form-item label="创业标题" prop="title" class="form-item-w80">
                                    <el-input v-model.trim="ruleForm.title" placeholder="请输入" class="w-full" />
                                </el-form-item>
                                
                                <el-form-item label="创业分类" prop="status" class="form-item-w80">
                                    <el-select v-model="ruleForm.status" placeholder="请选择创业分类" class="w-full"
                                        @change="selectChan()">
                                        <el-option v-for="item in options" :key="item.id" :label="item.label"
                                            :value="item.id" />
                                    </el-select>
                                </el-form-item>
                                
                                <el-form-item label="创业文案" prop="intr" class="form-item-w80">
                                    <el-input v-model.trim="ruleForm.intr" maxlength="200" class="w-full"
                                        placeholder="请输入" show-word-limit type="textarea"
                                        :autosize="{ minRows: 3, maxRows: 5 }" />
                                </el-form-item>
                            </div>
                            
                            <!-- 表单右侧区域 -->
                            <div class="form-col-right">
                                <el-form-item prop="quantity" label="浏览量" class="form-item-w50">
                                    <!-- 自定义数字输入控件，支持加减操作 -->
                                    <div class="custom-number-input">
                                        <button type="button" @click="decreaseQuantity">-</button>
                                        <input type="text" v-model="ruleForm.quantity" @keydown="handleKeydown"
                                            @input="handleQuantityInput" @blur="validateQuantityInput" />
                                        <button type="button" @click="increaseQuantity">+</button>
                                    </div>
                                </el-form-item>
                                
                                <el-form-item label="发布时间" prop="jobc_time" class="form-item-w60">
                                    <el-input v-model.trim="ruleForm.jobc_time" type="date"
                                        :picker-options="pickerOptions" @change="handleDateChange" />
                                </el-form-item>
                                
                                <el-form-item prop="img" label="封面上传" class="mt-4">
                                    <!-- 图片上传控件，支持预览和删除 -->
                                    <el-upload list-type="picture-card" v-model="ruleForm.img"
                                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                                        :file-list="fileList" accept=".jpeg,.png,.jpg,.bmp,.gif,.webp" max="1"
                                        ref="uploadEle" :on-change="handleChange" :on-success="handleSuccess"
                                        :before-upload="beforeUpload" multiple>
                                        <el-icon>
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                    <el-dialog v-model="dialogVisible">
                                        <img width="100%" :src="dialogImageUrl" alt="" />
                                    </el-dialog>
                                </el-form-item>
                            </div>
                        </div>
                        
                        <!-- 百度富文本编辑器，用于编辑文章内容 -->
                        <el-form-item label="创业文章内容" prop="content" class="w-full mt-5">
                            <vue-ueditor-wrap v-model="ruleForm.content" :config="editorConfig"
                                editor-id="editor-demo-01"></vue-ueditor-wrap>
                        </el-form-item>
                    </el-form>
                    
                    <!-- 表单操作按钮 -->
                    <div class="dialog-footer form-actions">
                        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
                        <el-button @click="closes(ruleFormRef)">取消</el-button>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
// 导入api和组件
import { ref, reactive } from 'vue';
import { scenicList, scenicSave, scenicDel } from '../../api/shopping/index'
import { ElMessage, ElCard, ElDropdown } from 'element-plus';
import { Plus, Search, ArrowLeft, ArrowDown, RefreshRight } from '@element-plus/icons-vue';
import { scenicUpload } from '../../api/uploading/index';
import { useRoute, useRouter } from 'vue-router';
import { inject } from 'vue'

// 分类选项数据
const options = ref([])
const defaultOptions = ref('')
const originalJobcTime = ref(''); // 用于保存原始日期
const num = ref(0)

// 数据变量
const activeList = ref([]);       // 当前显示的文章列表
const activeStatu = ref(true)     // 控制列表区域显示/隐藏
const activeStatud = ref(false)   // 控制表单区域显示/隐藏
const names = ref('导出');

// 注入全局函数和变量
const testFn = inject('testFn')
testFn()
const testName = inject('testName')
const dialogTableVisible = ref(false);
const statused = ref('1');        // 状态标记：1表示新增，2表示编辑
const router = useRouter();

// 表格分页相关
const inputed = ref('');          // 标题搜索输入
const minQuantity = ref('');      // 最小浏览量
const maxQuantity = ref('');      // 最大浏览量
const pageSize = ref(5);          // 每页显示数量
const currentPage = ref(1);       // 当前页码
const pageSizes = ref(5);
const currentPages = ref(1);
const copyList = ref([]);         // 原始数据备份，用于搜索筛选
const files = ref(false);
const synopsiss = ref('请输入简介')

// 文章ID和用户信息
const activId = ref('')
let tokens = JSON.parse(localStorage.getItem('tokens'));
console.log(tokens);
const fg = ref([])

// 初始化渲染列表数据
render();
function render() {
    scenicList({
        token: tokens.token,
        uid: tokens.userinfo.id
    }).then((res) => {
        console.log(res);
        activeList.value = res.data[0];  // 文章列表数据
        copyList.value = res.data[0];    // 备份原始数据
        fg.value = res.data[1]           // 分类数据
        options.value = fg.value
    });
}

// 图片服务器前缀
let prefix = 'http://yikatong.kuxia.top'

// 百度富文本编辑器配置
const editorConfig = reactive({
    // 编辑器不自动被内容撑高
    autoHeightEnabled: false,
    // 初始容器高度
    initialFrameHeight: 150,
    // 初始容器宽度
    initialFrameWidth: '100vw',
    UEDITOR_HOME_URL: '/UEditor/', // 访问 UEditor 静态资源的根路径
    serverUrl: '/pc/common/ueditor', // 服务端接口
    uploadUrl: '/UEditor',
});

// 表单初始数据
const ruleForms = reactive({
    status: '',
    title: '',
    img: '',
    intr: '',
    quantity: '',
    content: '',
    jobc_time: ''
})

// 上传文件相关
const list = ref([])
const lists = ref([])
const fileList = ref([])

// 分类选择变更处理
function selectChan() {
    console.log(defaultOptions.value);
}

// 表格滚动加载处理（目前仅打印日志）
function handleTableScroll() {
    console.log('滚动分页')
}

// 上传前处理，阻止默认上传行为，使用自定义上传逻辑
const beforeUpload = (file) => {
    console.log(2345);
    const formData = new FormData();
    formData.append('file', file);
    
    // 调用上传接口
    scenicUpload(formData).then((res) => {
        console.log(res);
        fileList.value = [
            {
                url: prefix + res.data.url,
            },
        ];
        imgUrls.value = res.data.url;
        ruleForm.img = res.data.url;
        console.log(ruleForm);
    })

    return false; // 阻止默认上传行为
};

// 获取当前时间字符串
function getCurrentDateTimeString() {
    const now = new Date();
    const year = now.getFullYear().toString().slice();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    const hours = now.getHours().toString().padStart('0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    
    const dateTimeString = `${year}-${month}-${day} ${hours}-${minutes}-${seconds}`;
    g = `${year}-${month}-${day}`
    return dateTimeString;
}

// 点击新增按钮处理
const addText = ref("")
function add() {
    activeStatu.value = false        // 隐藏列表区域
    addText.value = '添加'
    activeStatud.value = true        // 显示表单区域
    dialogTableVisible.value = true;
    statused.value = '1';            // 设置为新增状态
    disableds.value = true;
    
    // 重置表单数据
    (ruleForm.name = ''), (ruleForm.start_time = ''), (ruleForm.end_time = ''), 
    (ruleForm.details = ''), (ruleForm.img = ''), (ruleForm.synopsis = '');
}

// 日期变更处理，验证日期是否合法
const handleDateChange = (value) => {
    // 仅在新增状态下验证
    if (statused.value === '1' && value) {
        const selectedDate = new Date(value);
        const today = new Date();
        today.setHours(0, 0, 0, 0);

        if (selectedDate < today) {
            ElMessage({
                type: 'warning',
                message: '发布时间不能早于今天'
            });
            // 清空无效选择
            ruleForm.jobc_time = '';
        }
    }
};

// 浏览量验证函数，确保输入为大于0的正整数
const validateQuantity = (rule, value, callback) => {
    // 定义正整数正则表达式（不允许前导零）
    const reg = /^[1-9]\d*$/;

    if (!value) {
        callback(new Error('请输入浏览量'));
    } else if (!reg.test(value)) {
        callback(new Error('请输入大于0的正整数'));
    } else {
        callback();
    }
};

// 减少浏览量
const decreaseQuantity = () => {
    if (ruleForm.quantity && parseInt(ruleForm.quantity) > 1) {
        ruleForm.quantity = (parseInt(ruleForm.quantity) - 1).toString();
    }
};

// 增加浏览量
const increaseQuantity = () => {
    if (ruleForm.quantity) {
        ruleForm.quantity = (parseInt(ruleForm.quantity) + 1).toString();
    } else {
        ruleForm.quantity = '1';
    }
};

// 处理浏览量输入，过滤非数字字符
const handleQuantityInput = (event) => {
    // 获取输入值
    let value = event.target.value;

    // 过滤非数字字符
    value = value.replace(/[^0-9]/g, '');

    // 不允许前导零（除非是单个0，但我们的规则是大于0的正整数）
    if (value.startsWith('0') && value.length > 1) {
        value = value.substring(1);
    }

    // 更新Vue数据
    ruleForm.quantity = value;
};

// 验证浏览量输入
const validateQuantityInput = () => {
    const value = ruleForm.quantity;
    const reg = /^[1-9]\d*$/;

    if (value && !reg.test(value)) {
        ElMessage({
            type: 'warning',
            message: '请输入大于0的正整数'
        });
        // 清空无效输入
        ruleForm.quantity = '';
    }
};

// 表单数据和验证规则
const ruleForm = reactive({
    status: '',
    title: '',
    img: '',
    intr: '',
    quantity: '',
    content: '',
    jobc_time: ''
});
const ruleFormRef = ref('');
const rules = reactive({
    title: [
        {
            required: true,
            message: '请输入标题',
            trigger: 'blur',
        },
    ],
    jobc_time: [
        {
            required: true,
            message: '请选择发布时间',
            trigger: 'blur',
        },
        {
            validator: (rule, value, callback) => {
                // 仅在新增状态或用户修改了日期时验证
                if (statused.value === '1' || (statused.value === '2' && value !== originalJobcTime.value)) {
                    if (!value) {
                        callback(new Error('请选择发布时间'));
                    } else {
                        const selectedDate = new Date(value);
                        const today = new Date();
                        today.setHours(0, 0, 0, 0);

                        if (selectedDate < today) {
                            callback(new Error('发布时间不能早于今天'));
                        } else {
                            callback();
                        }
                    }
                } else {
                    // 编辑状态且用户未修改日期，通过验证
                    callback();
                }
            },
            trigger: 'change'
        }
    ],
    status: [
        {
            required: true,
            message: '请选择创业分类',
            trigger: 'blur',
        }
    ],
    quantity: [
        {
            required: true,
            message: '请输入浏览量',
            trigger: 'blur',
        },
        {
            validator: validateQuantity,
            trigger: 'blur'
        }
    ],
    img: [
        {
            required: true,
            message: '请上传图片',
            trigger: 'change',
        },
    ],
    content: [
        {
            required: true,
            message: '请输入创业文章内容',
            trigger: 'change',
        },
    ],
    intr: [
        {
            required: true,
            trigger: 'blur',
            message: '请输入创业文案',
        },
    ],
});

// 时间验证函数（目前未使用）
function validateEmailDomain(rule, value, callback) {
    if (value === '') {
        callback(new Error('结束时间不能为空'));
    } else if (value < ruleForm.start_time) {
        // 假设我们只允许 @example.com 的邮箱  
        callback(new Error('结束时间不能小于开始时间'));
    } else {
        callback();
    }
}

const imgUrls = ref('');

// 提交表单处理
const submitForm = (formEl) => {
    console.log(ruleForm);
    if (!formEl) return;
    
    // 表单验证
    formEl.validate((valid) => {
        if (valid) {
            if (statused.value == '1') {
                // 新增操作
                ruleForm.img = imgUrls.value;
                console.log(ruleForm);
                
                // 转换分类值
                if (ruleForm.status == '创业') {
                    ruleForm.status = 1
                }
                else if (ruleForm.status == '就业') {
                    ruleForm.status = 2
                }
                
                scenicSave(ruleForm).then((res) => {
                    if (res.code == '1') {
                        ElMessage({
                            message: '新增成功',
                            type: 'success',
                        });
                        setTimeout(() => {
                            activeStatud.value = false;  // 隐藏表单区域
                            activeStatu.value = true;    // 显示列表区域
                        }, 1200);
                        closes(ruleFormRef.value)
                        render();  // 重新加载数据
                    }
                    Object.assign(ruleForm, ruleForms)
                    ruleFormRef.value.$resetFields();
                });
            } else if (statused.value == '2') {
                // 编辑操作
                ruleForm.id = ids.value
                
                // 转换分类值
                if (ruleForm.status == '创业') {
                    ruleForm.status = 1
                }
                else if (ruleForm.status == '就业') {
                    ruleForm.status = 2
                }
                
                scenicSave(ruleForm).then((res) => {
                    if (res.code == '1') {
                        ElMessage({
                            message: '编辑成功',
                            type: 'success',
                        });
                        setTimeout(() => {
                            activeStatud.value = false;
                            activeStatu.value = true;
                        }, 1200);
                        closes(ruleFormRef.value)
                        render();
                    } else if (res.code == 0) {
                        ElMessage({
                            message: '编辑失败，不能和原数据一致',
                            type: 'warning',
                        });
                    } else {
                        // 其他错误处理
                    }
                });
            }
        }
        else {
            ElMessage({
                message: '新增失败',
                type: 'error',
            });
        }
    });
};

// 编辑相关变量
const ids = ref('');
const disableds = ref(true);

// 关闭表单处理
const closes = (formEl) => {
    console.log(formEl);
    activeStatu.value = true        // 显示列表区域
    activeStatud.value = false      // 隐藏表单区域
    formEl.resetFields();           // 重置表单字段
    formEl.clearValidate()          // 清除表单验证
    dialogTableVisible.value = false;
    files.value = false;
    ruleForm.name = ''
    ruleForm.img = ''
    fileList.value = [];
};

// 点击编辑按钮处理
function edit(item) {
    console.log(item);
    // 保存原始日期
    originalJobcTime.value = item.jobc_time;
    
    // 直接赋值原数据（包括可能早于今天的日期）
    Object.assign(ruleForm, item); 
    
    // 处理分类显示
    ruleForm.status = item.status === 1 ? '创业' : '就业';
    
    // 设置为编辑状态
    statused.value = '2'; 
    addText.value = '编辑';
    ids.value = item.id;
    activeStatud.value = true;
    activeStatu.value = false;
    disableds.value = false;
}

// 点击删除按钮处理
function deletes(item) {
    console.log(item);
    centerDialogVisible.value = true;  // 显示删除确认对话框
    deleteids.value = item.id;         // 保存要删除的ID
}

// 删除相关变量
const deleteids = ref('');
const centerDialogVisible = ref(false);

// 处理数字输入，过滤非数字字符
const handleNumberInput = (value, field) => {
    // 过滤非数字字符
    let filteredValue = value.replace(/[^0-9]/g, '');
    
    // 不允许前导零（除非是单个0）
    if (filteredValue.startsWith('0') && filteredValue.length > 1) {
        filteredValue = filteredValue.substring(1);
    }
    
    // 更新对应字段的值
    if (field === 'minQuantity') {
        minQuantity.value = filteredValue;
    } else if (field === 'maxQuantity') {
        maxQuantity.value = filteredValue;
    }
    
    // 触发搜索
    filterQuantityRange();
};

// 验证数字输入
const validateNumberInput = (value, field) => {
    const reg = /^[1-9]\d*$/;
    
    if (value && !reg.test(value)) {
        ElMessage({
            type: 'warning',
            message: '请输入大于0的正整数'
        });
        
        // 清空无效输入
        if (field === 'minQuantity') {
            minQuantity.value = '';
        } else if (field === 'maxQuantity') {
            maxQuantity.value = '';
        }
    }
};

// 浏览量区间搜索
function filterQuantityRange() {
    currentPage.value = 1;
    
    // 如果两个输入框都为空，则显示全部数据
    if (!minQuantity.value && !maxQuantity.value) {
        activeList.value = [...copyList.value];
        return;
    }

    activeList.value = copyList.value.filter(item => {
        // 处理最小值筛选
        if (minQuantity.value && item.quantity < parseInt(minQuantity.value)) {
            return false;
        }
        // 处理最大值筛选
        if (maxQuantity.value && item.quantity > parseInt(maxQuantity.value)) {
            return false;
        }
        return true;
    });
}

// 确认删除处理
function deleteid() {
    scenicDel({
        ids: deleteids.value,
    }).then((res) => {
        if (res.code == '1') {
            centerDialogVisible.value = false;  // 关闭确认对话框
            ElMessage({
                message: '删除成功',
                type: 'success',
            });
            render();  // 重新加载数据
        }
    });
}

// 标题搜索处理
function filters() {
    currentPage.value = 1
    console.log(inputed.value);
    activeList.value = copyList.value.filter(function (item) {
        // 判断是否满足搜索条件
        return String(item.title).indexOf(String(inputed.value)) > -1;
    });
}

// 批量删除相关
const shows = ref(false);
const setArr = ref([]);

// 表格选择变更处理
const multipleTableRef = ref()
const SelectArr = ref([])  // 当前选中的项
const All_Delete = ref([]) // 要删除的ID数组
const handleSelectionChange = (val) => {
    All_Delete.value = []
    SelectArr.value = val
    
    // 收集选中项的ID
    SelectArr.value.forEach(item => {
        console.log(item);
        All_Delete.value.push(item.id)
    })
    console.log(All_Delete.value);
}

// 批量删除处理
const centerDialogVisiblet = ref(false)
const statued = ref([])
function deleList() {
    statued.value = []
    console.log(All_Delete.value);
    statued.value.push(All_Delete.value)
    
    // 检查是否有选中项
    if (All_Delete.value == '') {
        ElMessage({
            message: '请勾选要删除的数据',
            type: 'warning',
        })
    } else {
        centerDialogVisiblet.value = true  // 显示批量删除确认对话框
    }
}

// 确认批量删除处理
const deleteid_t = () => {
    scenicDel({
        ids: statued.value.join(','),
    }).then(res => {
        console.log(res, '删除成功或失败回调');
        centerDialogVisiblet.value = false;  // 关闭确认对话框
        render();  // 重新加载数据
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
    })
}
</script>

<style>
/* 布局相关样式 */
.card-padding {
    padding: 10px;
}

.form-padding {
    padding: 10px;
}

.form-card {
    width: 96%;
    margin-left: 2%;
    margin-top: 1%;
    position: relative;
    height: auto;
}

.form-title {
    padding: 10px;
}

.divider {
    width: 100%;
    height: 1px;
    background-color: rgba(195, 195, 195, 1);
}

.form-content {
    margin-top: 20px;
    margin-left: 100px;
    width: 80%;
    padding-top: 40px;
}

.form-row {
    width: 100%;
    display: flex;
}

.form-col-left {
    width: 48%;
}

.form-col-right {
    width: 48%;
    padding-left: 30px;
}

.form-item-w80 {
    width: 80%;
}

.form-item-w50 {
    width: 50%;
}

.form-item-w60 {
    width: 60%;
}

.form-actions {
    margin-top: 10px;
    margin-left: 80%;
}

/* 列表相关样式 */
.title-width {
    width: 220px;
}

.time_top {
    /* 保持原有的内联样式中的类名 */
}

.search-input {
    width: 220px;
}

.ml-5 {
    margin-left: 20px;
}

.ml-3 {
    margin-left: 10px;
}

.mt-2 {
    margin-top: 10px;
}

.w-full {
    width: 100%;
}

.quantity-input {
    width: 140px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    color: #606266;
    outline: none;
    transition: border-color 0.2s;
}

.quantity-input:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.preview-image {
    width: 40px;
    height: 40px;
}

.edit-btn {
    color: rgba(64, 158, 255, 1);
    cursor: pointer;
}

.delete-btn {
    color: red;
    cursor: pointer;
}

.handle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.handle-spacing {
    width: 10px;
}

.paging {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    height: 70px;
}

/* 对话框相关样式 */
.dialog-message {
    font-size: 16px;
    padding-bottom: 20px;
}

.dialog-footer {
    display: flex;
    justify-content: end;
}

/* 上传控件相关样式 */
.el-upload--picture-card {
    --el-upload-picture-card-size: 81px;
    align-items: center;
    background-color: var(--el-fill-color-lighter);
    border: 1px dashed var(--el-border-color-darker);
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    height: var(--el-upload-picture-card-size);
    justify-content: center;
    vertical-align: top;
    width: var(--el-upload-picture-card-size);
}

.el-upload-list--picture-card {
    --el-upload-list-picture-card-size: 80px;
    display: inline-flex;
    flex-wrap: wrap;
    margin: 0;
    flex-wrap: nowrap !important;
}

/* 自定义数字输入控件样式 */
.custom-number-input {
    display: flex;
    align-items: center;
    width: 150px;
}

.custom-number-input button {
    width: 30px;
    height: 30px;
    border: 1px solid #dcdfe6;
    background-color: #f5f7fa;
    color: #606266;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    user-select: none;
}

.custom-number-input button:hover {
    background-color: #e4e7ed;
}

.custom-number-input button:first-child {
    border-radius: 4px 0 0 4px;
}

.custom-number-input button:last-child {
    border-radius: 0 4px 4px 0;
}

.custom-number-input input {
    flex: 1;
    height: 30px;
    border: 1px solid #dcdfe6;
    border-left: none;
    border-right: none;
    text-align: center;
    padding: 0 5px;
    font-size: 14px;
    outline: none;
    width: 50px;
}

.custom-number-input input:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* 其他样式 */
.flex {
    display: flex;
    align-items: center;
}

.flexBox {
    display: flex;
    width: 100%;
    align-items: center;
}

.range-separator {
    margin: 0 5px;
    color: #909399;
}

.native-input-container {
    display: flex;
    align-items: center;
}

.mt-4 {
    margin-top: 15px;
}

.mt-5 {
    margin-top: 20px;
}

.flex-col {
    display: flex;
    flex-direction: column;
}
</style>